<template>
  <div class="dialog-view">
    <div v-if="loading" class="dialog-loading">
      <a-spin tip="Loading..." />
    </div>
    <div class="dialog-iframe" v-if="localUrl && show">
      <iframe  style="height:100%;width:100%;border: none;" ref="iframeId" :src="localUrl" />
    </div>
  </div>
</template>

<script>
    import {App} from "@lowcode/jpaas-common-lib";
    import SysAppApi from "@/api/system/core/sysApp";
    import switchExport from "@/utils/switchExport";
    import FormEntityDataSettingApi from '@/api/form/core/formEntityDataSetting'
    export default {
        name: 'FormEntityDataSettingList',
        mixins: [App,switchExport],
        data(){
          return {
            show:true,
            localUrl:"",
            loading:false,
            /**
             * 导出配置
             */
            exportConf:{
                Api:FormEntityDataSettingApi,
                id:"id"
            }
          }
        },
        created(){
          this.initView();
        },
        methods:{
          iframeLoading(){
            this.$nextTick(()=>{
              let iframe = this.$refs['iframeId']
              if(iframe){
                iframe.addEventListener('load', ()=>{
                  //iframe
                  this.loading = false ;
                })
              }
            })
          },
          initView() {
            var self=this;
            SysAppApi.get(this.curApp.appId).then(res=>{
              let app=res.data;
              let path=app.path;
              let url=`${path}/${app.clientCode}/dataSettingList?appId=${self.curApp.appId}`;
              self.loading = true
              self.show=true;
              self.localUrl = url;
              self.iframeLoading()
            })
          }
        },
        watch: {
          '$route': {
            handler: function (val, old) {
              this.show = false;
              this.$nextTick(() => {
                this.initView();
              })
            }
          },
          deep: true
        }
    }
</script>
<style scoped>
.dialog-view{
  width:100%;height:100%;position: relative
}
.dialog-loading{
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog-iframe{
  width:100%;height:100%;overflow: hidden;
}
</style>

